<!-- 首页 -->
<template>
  <div>
    <!-- 标题栏 -->
    <van-sticky>
      <MainNavBar> </MainNavBar>
    </van-sticky>
    <!-- 顶部tab -->
    <div>
      <van-tabs v-model="active" sticky swipeable animated @change="getPage">
        <van-tab v-for="item in tabList" :key="item" :title="item">
          <router-view></router-view>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import MainNavBar from "@/components/MainNavBar";

export default {
  name: "Home",
  components: {
    MainNavBar
  },
  props: {},
  data() {
    return {
      placeholder: "请输入内容", // 搜索框提示
      rightBtn: {
        // header 右侧按钮
        number: 1, // 按钮数量
        iconName: ["chat-o"]
      },

      active: 0, // 当前栏
      tabList: ["介绍", "推荐", "应用", "更多"] // tab 列表
    };
  },
  computed: {},
  watch: {},

  created() {},

  methods: {
    // 右侧按钮
    handleIcon() {
      console.log("消息中心");
    },
    // 切换页面
    getPage(index) {
      switch (index) {
        case 0:
          this.$router.push("/Home/HomeHot");
          break;
        case 1:
          this.$router.push("/Home/HomeNew");
          break;
        case 2:
          this.$router.push("/Home/HomeTool");
          break;
        case 3:
          this.$router.push("/Home/HomeMore");
          break;
        default:
          return false;
      }
    }
  }
};
</script>
